<script>

// 引入 vue 的 computed 计算属性
import { computed } from 'vue'
// 引入 pinia 菜单 store
import { useMenuStore } from '@/store/index'
// 引入 Element Plus 的图标组件
import { HomeFilled } from '@element-plus/icons-vue'

export default {
    name: "Aside",
    props: {
        isCollapse: Boolean
    },
    setup(props) {
        // 获取 pinia 菜单 store 实例
        const menuStore = useMenuStore()
        // 计算属性，获取菜单数据
        const menu = computed(() => menuStore.menu)
        console.log('menu:', menu.value)
        return {
            menu
        }
    },
    components: {
        HomeFilled
    }
}
</script>

<template>
    <!-- 侧边栏菜单，使用 Element Plus 的 el-menu 组件 -->
    <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height: 100%;"
        default-active="/Home" :collapse="isCollapse" :collapse-transition="false" router>
        <!-- 首页菜单项 -->
        <el-menu-item index="/Home">
            <el-icon>
                <HomeFilled />
            </el-icon>
            <template #title>首页</template>
        </el-menu-item>

        <!-- 动态生成菜单项，根据 menu 数据渲染 -->
        <el-menu-item :index="'/' + item.menuclick" v-for="(item, i) in menu" :key="i">
            <el-icon>
                <!-- 动态渲染菜单图标 -->
                <component :is="item.menuicon" />
            </el-icon>
            <template #title>{{ item.menuname }}</template>
        </el-menu-item>
    </el-menu>
</template>



<style scoped></style>
